<template>
    <div>
        <el-tabs
        @tab-remove="handleTabRemove"
        v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane v-for="item in arr" :closable="arr.length>1" :label="item.title" :name="item.path"></el-tab-pane>
          </el-tabs>
    </div>
</template>
<script>
    export default {
        setup(){


            const activeName = ref('first')


            let arr=ref([])

            function addTab(obj){
                if(!arr.value.find(s=>s.path==obj.path)){
                    arr.value.push(obj)
                }
                activeName.value=obj.path
            }


            onMounted(()=>{
                window.$v3.$router.afterEach((to,from)=>{
                    // console.log('to and from in after cb --:',to,from)
                    addTab(to.meta)
                })
            })


            return {
                arr,
                activeName ,
                handleClick({paneName},s){
                    if(activeName.value==paneName){
                        return
                    }
                    activeName.value=paneName
                    window.$v3.$router.push(paneName)
                    // debugger
                },
                handleTabRemove(n,s){
                    if(1==arr.value.length){
                        return
                    }

                    let idx=arr.value.findIndex(s=>s.path==n)

                    activeName.value=arr.value[idx-1].path;
                    window.$v3.$router.push(activeName.value)
                    arr.value.splice(idx,1)
                    // debugger
                }
            }

        }
    }
</script>